<template>
  <div>
    <div class="container">
      <div class="item">
        <div class="left">短信模板名称</div>
        <div style="width: 70%;">
          <el-select
            v-model="smsTemplatesSelectValue" placeholder="请选择短信模板"
            style="width:500px;" @change="smsTemplateSelectChangeMethod">
            <el-option
              v-for="item in smsTemplatesOptions" :key="item.id" :label="item.title"
              :modelValue="item"/>
          </el-select>
        </div>
      </div>
      <div class="item">
        <div class="left">签名名称</div>
        <div style="width: 70%;">
          <el-select v-model="smsSignsSelectValue" placeholder="请选择签名" style="width:500px;">
            <el-option
              v-for="item in smsSignsOptions" :key="item.id" :label="item.text"
              :modelValue="item.text"/>
          </el-select>
        </div>
      </div>
      <div class="item">
        <div class="left">短信预览</div>
        <div style="width: 70%;">
          <el-input
            type="textarea" :rows="5" placeholder="请输入内容" v-model="finallyShowContent"
            style="width:500px;" disabled/>
          <br/>
          <p class="explain">
            当前发送内容{{
              smsTemplatesSelectValue.text ? smsPreview ? smsPreview.length : smsTemplatesSelectValue.text.length : 0
            }}个字，预计发送条数约为
            {{
              smsTemplatesSelectValue.text ? Math.ceil(smsPreview ? smsPreview.length / 67 : smsTemplatesSelectValue.text.length / 67) : 0
            }}条短信</p>
          <p class="example">（实际发送时，如有模板变量会影响计费条数，请特别关注）</p>
          <p style="font-size: 16px;">短信计费的条数，计费规则请参考 <a
            href="https://cloud.tencent.com/document/product/382/18058#.E7.9F.AD.E4.BF.A1.E5.86.85.E5.AE.B9.E9.95.BF.E5.BA.A6.E8.AE.A1.E7.AE.97.E8.A7.84.E5.88.99"
            target="_blank" style="color:#00a4ff">国内短信内容长度计算规则</a> 或 国<a
            href="https://cloud.tencent.com/document/product/382/18052#.E5.9B.BD.E9.99.85.E7.9F.AD.E4.BF.A1.E5.86.85.E5.AE.B9.E9.95.BF.E5.BA.A6.E8.AE.A1.E7.AE.97.E8.A7.84.E5.88.99"
            target="_blank" style="color:#00a4ff">国际/港澳台短信内容长度计算规则</a></p>
        </div>
      </div>
      <div class="item">
        <div class="left">短信模板参数</div>
        <div style="width: 70%;">
          <el-input
            type="textarea" :rows="5" placeholder="请输入内容" v-model="templateParams"
            style="width:500px;" @change="smsPreviewMethod"/>
          <p class="explain">多个参数之间用英文逗号(<span style="color:#e54545">,</span>)隔开例如：
          </p>
          <p class="example auto-typing">xx公司,xx元,xx服务器</p>
        </div>
      </div>
      <div class="item">
        <div class="left">发送对象</div>
        <div style="width: 70%;">
          <el-input
            type="textarea" :rows="5" placeholder="请输入内容" v-model="mobilesStr"
            style="width:500px;"/>
          <p class="explain">发送的对象不能超过<span style="color:#e54545">10</span>个,多个手机号码之间用英文逗号(<span
            style="color:#e54545">,</span>)隔开，例如：</p>
          <p class="example auto-typing ">135xxxxxxxx,138xxxxxxxx,159xxxxxxxx</p>
        </div>
      </div>
      <div class="item">
        <div class="left">用户是否需要回复该短信</div>
        <div style="width: 70%;">
          <el-radio v-model="userNeedReplySmsRadio" label="0">不需要</el-radio>
          <el-radio v-model="userNeedReplySmsRadio" label="1">需要</el-radio>
        </div>
      </div>
      <div class="item" v-if="userNeedReplySmsRadio==='1'">
        <div class="left">回复截至天数</div>
        <div style="width: 20%;">
          <el-input placeholder="请输入天数" v-model="replyEndDay">
            <template #append>天内</template>
          </el-input>
        </div>
      </div>
    </div>
    <div style="display:flex; flex-direction:row-reverse">
      <el-button @click="handleCancel" style="margin-left:30px;">取 消</el-button>
      <el-button type="primary" @click="sendSmsMethod" v-loading="showSendDialogVisibleLoading">确
        定
      </el-button>
    </div>
    <el-dialog
      title="发送结果" :append-to-body='true' v-model="sendResultVisible" width="30%"
      :close-on-click-modal="false">
      <el-table v-adaptive :data="sendResult" style="width: 100%">
        <el-table-column prop="username" label="用户" width="180"/>
        <el-table-column prop="mobile" label="手机号" width="180"/>
        <el-table-column prop="" label="状态">
          <template #default="scope">
            <div style="display:flex;align-items: center;">
              <el-tag type="success" v-if="scope.row.sendStatus=='0'">成功</el-tag>
              <el-tag type="info" v-if="scope.row.sendStatus=='1'">待审核</el-tag>
              <el-tag type="danger" v-if="scope.row.sendStatus=='2'">失败</el-tag>
              <el-tag type="danger" v-if="scope.row.sendStatus=='3'">发送中</el-tag>
              <el-tag type="danger" v-if="scope.row.sendStatus=='4'">结束</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import util from '@/components/mdp-ui/js/util'; //全局公共库
import {mapState} from 'pinia'
import {useUserStore} from '@/store/modules/user'
import {
  listSmsTemplate
} from '@/api/mdp/sms/smsTemplate';
import {
  groupSendSmsApi,
  listSmsSign
} from '@/api/mdp/sms/smsSign';

export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    smsBodyParams: {
      type: Object,
      default: () => ({})
    },
    smsUserList: {
      type: Object,
      default: () => ({})
    },
    loadPhonenoByUserid: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      sendResultVisible: false,
      sendResult: [],
      replyEndDay: '',
      userNeedReplySmsRadio: '0',
      activeName: 'first',
      showSendDialogVisibleLoading: false,
      finallyShowContent: '',
      smsPreview: '',
      templateParams: '',
      mobilesStr: '',
      smsSignsSelectValue: '',
      smsTemplatesSelectValue: '',
      smsSignsOptions: [],
      smsTemplatesOptions: [],
      selectShopVisible: false,
      shopId: '',
      locationId: '',
      branchId: '',
      sendSmsVisible: false,
      textarea: '',
      value: '',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    };
  },
  computed: {
    ...mapState(useUserStore, [
      'userInfo'
    ])
  },
  watch: {
    'visible': function (visible) {
      if (visible == true) {
        this.getMobilesStr();
        this.getSmsTemplates();
        this.getSmsSigns();
        if (this.smsBodyParams) {
          this.templateParams = this.smsBodyParams.join(",");
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getSmsTemplates();
      this.getSmsSigns();
      this.getMobilesStr();
      if (this.smsBodyParams) {
        this.templateParams = this.smsBodyParams.join(",");
      }
    });
  },
  methods: {
    //展示选择门店的方法
    showSelectShopMethod() {
      this.selectShopVisible = true;
    },
    sureMethod(row) {
      this.selectShopVisible = false;
      this.branchId = row.branchId;
      this.shopId = row.shopId;
      this.locationId = row.id;
      this.getSmsTemplates();
    },
    showSendDialogVisibleMethod() {
      this.shopId = this.userInfo.shopId;
      this.locationId = this.userInfo.locationId;
      this.branchId = this.userInfo.branchId;
      this.sendSmsVisible = true;
      //获取短信签名
      this.getSmsSigns();
      //this.sendSmsVisible=!this.sendSmsVisible;
    },

    handleCancel: function () {
      this.$emit('cancel');
    },
    sendSmsMethod() {
      if (!this.smsTemplatesSelectValue) {
        this.$message({
          position: 'bottom-left', showClose: true,
          message: "请选择某个模板",
          type: 'error'
        });
        return;
      }
      if (!this.smsSignsSelectValue) {
        this.$message({
          position: 'bottom-left', showClose: true,
          message: "请选择某个签名",
          type: 'error'
        });
        return;
      }
      if (!this.mobilesStr) {
        this.$message({
          position: 'bottom-left', showClose: true,
          message: "发送对象不能为空",
          type: 'error'
        });
        return;
      }
      /* var mobilesStr = '';
      for (let i = 0; i < this.sels.length; i++) {
        if (i != 0) {
          mobilesStr = mobilesStr + "," + this.sels[i].phoneno;
        } else {
          mobilesStr += this.sels[i].phoneno;
        }
      } */

      var mobileArr = this.mobilesStr.split(",");
      if (mobileArr.length > 10) {
        this.$message({
          position: 'bottom-left', showClose: true,
          message: "发送的对象不能超过10个",
          type: 'error'
        });
        return;
      }
      for (let i = 0; i < mobileArr.length; i++) {
        if (!/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/.test(
          mobileArr[i])) {
          this.$message({
            position: 'bottom-left', showClose: true,
            message: mobileArr[i] + "手机号码不对",
            type: 'error'
          });
          return;
        }
        if (this.mobilesStr.lastIndexOf(mobileArr[i]) != this.mobilesStr.indexOf(mobileArr[i])) {
          this.$message({
            position: 'bottom-left', showClose: true,
            message: "请填写不同的手机号码进行发送",
            type: 'error'
          });
          return;
        }
      }
      var templateParamsArr = this.templateParams.split(",");
      //统计短信模板变量出现的次数
      var reg = /\{\d\}/;
      let smsTemplateVariableCount = this.smsTemplatesSelectValue.text.split(reg).length - 1;
      if (templateParamsArr.length != smsTemplateVariableCount) {
        this.$message({
          position: 'bottom-left', showClose: true,
          message: "输入的短信模板参数与短信模板的变量的数目不一致",
          type: 'error'
        });
        return;
      }
      if (this.userNeedReplySmsRadio === '1' && !this.replyEndDay) {
        this.$message({
          position: 'bottom-left', showClose: true,
          message: "如果勾选需要用户回复，必须填写天数",
          type: 'error'
        });
        return;
      }
      if (this.userNeedReplySmsRadio === '1' && !/^\d+$/.test(this.replyEndDay)) {
        this.$message({
          position: 'bottom-left', showClose: true,
          message: "天数必须是正整数",
          type: 'error'
        });
        return;
      }
      let params = {
        "smsTemplateParams": this.templateParams,
        "mobiles": this.mobilesStr,
        "smsSign": this.smsSignsSelectValue,
        "smsTemplateId": this.smsTemplatesSelectValue.id,
        "smsTtemplateText": this.smsTemplatesSelectValue.text,
        "nationCode": "86",
        "userid": this.userInfo.userid,
        "branchId": this.smsTemplatesSelectValue.branchId,
        "shopId": this.smsTemplatesSelectValue.shopId,
        "locationId": this.smsTemplatesSelectValue.locationId,
        "replyEndDay": this.replyEndDay,
        "userNeedReplySms": this.userNeedReplySmsRadio
      };
      this.showSendDialogVisibleLoading = true;
      this.sendResult = [];
      groupSendSmsApi(params).then((res) => {
        this.showSendDialogVisibleLoading = false;
        var tips = res.tips;
        if (tips.isOk) {
          for (let i = 0; i < res.data.length; i++) {
            for (let j = 0; j < this.sels.length; j++) {
              if (res.data[i].mobile == this.sels[j].phoneno) {
                res.data[i].username = this.sels[j].username
              }
            }
          }
          this.sendResultVisible = true;
          this.sendResult = res.data;
        }
        ;
        this.$message({
          position: 'bottom-left', showClose: true,
          message: tips.msg,
          type: tips.isOk ? 'success' : 'error'
        });
      }).catch(err => {
        this.sendSmsVisible = false
      });
    },
    //查询短信模板
    getSmsTemplates() {
      let params = {
        "shopId": this.userInfo.shopId,
        "locationId": this.userInfo.locationId,
        "branchId": this.userInfo.branchId,
        "status": "0"
      };
      this.finallyShowContent = '';
      this.smsPreview = '';
      this.smsTemplatesSelectValue = '';
      this.smsTemplatesOptions = [];
      listSmsTemplate(params).then((res) => {
        var tips = res.tips;
        if (tips.isOk) {
          this.smsTemplatesOptions = res.data;
        } else {
          this.$message({
            position: 'bottom-left', showClose: true,
            message: tips.msg,
            type: 'error'
          });
        }

      }).catch();
    },
    //查询短信签名
    getSmsSigns() {
      let params = {
        "status": "0",
        "shopId": this.userInfo.shopId
      };
      this.smsSignsOptions = [];
      listSmsSign(params).then((res) => {
        var tips = res.tips;
        if (tips.isOk) {
          this.smsSignsOptions = res.data;
        } else {
          this.$message({
            position: 'bottom-left', showClose: true,
            message: tips.msg,
            type: 'error'
          });
        }
      }).catch();
    },
    smsTemplateSelectChangeMethod() {
      this.finallyShowContent = this.smsTemplatesSelectValue.text;
    },
    //短信预览的方法
    smsPreviewMethod(value) {
      //求出模板中的变量的数量
      var reg = /\{\d\}/;
      this.smsPreview = '';
      if (!this.smsTemplatesSelectValue.text) {
        return;
      }
      this.finallyShowContent = this.smsTemplatesSelectValue.text;
      let smsTemplateVariableCount = this.smsTemplatesSelectValue.text.split(reg).length - 1;
      let valueArr = value.split(",");
      let finallyStr = this.smsTemplatesSelectValue.text;
      for (let i = 0; i < smsTemplateVariableCount; i++) {
        if (i < valueArr.length) {
          let k = i + 1;
          var regex = new RegExp('\\{' + k + '\\}');
          finallyStr = finallyStr.replace(regex, valueArr[i])
        }
      }
      ;
      this.smsPreview = finallyStr;
      this.finallyShowContent = this.smsPreview;
    },
    getMobilesStr() {
      this.mobilesStr = '';
      if (this.loadPhonenoByUserid == true) {
        let userids = this.smsUserList.map(user => user.userid);
        this.$mdp.listUser({userids: userids, branchId: this.userInfo.branchId}).then(res => {
          if (res.tips.isOk) {
            let users = res.data;
            let phonenoList = users.map(user => user.phoneno);
            this.mobilesStr = phonenoList.join(",");
          }
        });
      } else {
        let phonenoList = this.smsUserList.map(user => user.phoneno);
        this.mobilesStr = phonenoList.join(",");
      }

    },
    //初始化数据
    initData() {
      this.templateParams = '',
        this.mobilesStr = '';
      this.smsTemplatesSelectValue = '';
      this.smsSignsSelectValue = '';
    }

  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 0 auto;
}

.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 30px;
}

.item .left {
  width: 200px;
  font-size: 20px;
  color: #888;
  padding-right: 60px;
  align-self: flex-start;
  margin-top: 10px;
}

.item .explain {
  font-size: 16px;
  width: 500px;
}

.item .example {
  font-size: 16px;
  color: #e54545
}

.auto-typing {
  font-weight: bold;
  overflow: hidden;
  width: 53ch;
  border-right: 1px solid transparent;
  white-space: nowrap;
  animation: typing 5s steps(53) 5s forwards;
}

@keyframes typing {
  from {
    width: 0;
  }
}
</style>
